<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{margin: 0; padding: 0;}
        ul{
            list-style-type: none;
            border: 1px solid #ccc;
            width: 200px;
            margin: 100px auto;
            position: relative;
        }
        ul li{
            height: 45px;
            line-height: 45px;
            border-bottom: 1px dashed #ccc;
        }
        ul li a{
            text-decoration: none;
            color: #333;
            display: block;
            padding-left: 20px;
            background: url("img/jiantouR.png") no-repeat 165px center;
        }
        ul li a:hover{
            background: #ccc url("img/jiantouR.png") no-repeat 165px center;
            color: #fff;
        }
        ul li .list{
            width: 300px;
            height: 180px;
            border: 1px solid #000;
            position: absolute;
            left: 201px;
            top: -1px;
            display: none;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <a href="#">家用电器</a>
        <div class="list">
            hell1
        </div>
    </li>
    <li>
        <a href="#">厨房电器</a>
        <div class="list">
            hell2
        </div>
    </li>
    <li>
        <a href="#">电脑办公</a>
        <div class="list">
            hell3
        </div>
    </li>
    <li>
        <a href="#">手机电器</a>
        <div class="list">
            hell4
        </div>
    </li>
</ul>
</body>
</html>
<script>
    window.onload = function () {
        //获取li元素的集合
        var aLi = document.getElementsByTagName("li");
        //获取div元素的集合
        var aDiv = document.getElementsByTagName("div");
        for(var i=0;i<aLi.length;i++){
            aLi[i].index = i;
            aLi[i].onmouseover = function () {
                for(var i=0;i<aDiv.length;i++){
                    aDiv[i].style.display = "none";
                }
                aDiv[this.index].style.display = "block";
            }

            aLi[i].onmouseout = function () {
                aDiv[this.index].style.display = "none";
            }
        }
    };
</script>